<template>
    <div class="detailpage">
        <div class="">
            {{uploaddetail}}
            {{name}}
        </div>
        <div class="detailtittle">
            媒体详情
        </div>
        <div class="main">
            <div class="left">
                <img :src="uploaddetail.data.url" alt="" draggable="false">
            </div>
            <div class="right">
                <div>
                    <Row>
                        <i-col span="12">文件名：coffee.jpg</i-col>
                        <i-col span="12">文件类型：image/jpeg</i-col>
                    </Row>
                    <Row>
                        <i-col span="12">上传于：2018年7月18日</i-col>
                        <i-col span="12">文件大小：115 KB</i-col>
                    </Row>
                    <Row>
                        <i-col span="12">分辨率：2000 × 1200</i-col>
                        <i-col span="12">作者：某某某</i-col>
                    </Row>
                </div>
                <div class="formdiv">
                     <!-- v-drag -->
                    <i-form :model="formItem" :label-width="80">
                        <Form-item label="URL">
                            <i-input v-model="formItem.URL" placeholder="URL"></i-input>
                        </Form-item>
                        <Form-item label="标题">
                            <i-input v-model="formItem.tit" placeholder="标题"></i-input>
                        </Form-item>
                        <Form-item label="说明">
                            <i-input v-model="formItem.Explain" type="textarea" :autosize="{minRows: 2,minRows: 5}" placeholder="请输入..."></i-input>
                        </Form-item>
                        <Form-item label="替代文本">
                            <i-input v-model="formItem.alt" placeholder="替代文本"></i-input>
                        </Form-item>
                        <Form-item label="图像描述">
                            <i-input v-model="formItem.discript" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>                        </Form-item>
                        <Form-item>
                            <i-button type="primary">提交</i-button>
                            <i-button type="ghost" style="margin-left: 8px">取消</i-button>
                        </Form-item>
                    </i-form>
                </div>
            </div>
        </div>
        <!-- v-drag -->
            <i-button id="poview" class="drag"  ref="dragdiv" @click="goedit">编辑1</i-button>
        <!-- <div  class="drag" v-drag ref="dragdiv">  
            <i-button @click="goedit">编辑2</i-button>
        </div> -->
    </div>
</template>
<script>

    export default {
        props:{
            uploaddetail:{
                default:"nodata"
            },
            name
        },
        data () {
            return {
                formItem: {
                    URL: '',
                    tit: '',
                    Explain: 'male',
                    alt: " 描 述 ",
                    discript: "true"
                }
            }
        },
        methods: {
            goedit(){
                console.log("确定")
            }
        },
        directives:{
            drag(el,bindings){
                el.onmousedown = function(e){
                    console.log("onmousedown")
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    document.onmousemove = function (e){
                        el.style.left = e.pageX - disx+'px';
                        el.style.top = e.pageY - disx+'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = document.onmouseup = null;
                    }
                    // console.log(e);
                    // console.log(bindings);
                },
                el.onmouseup=function(e){
                    sessionStorage.setItem("pagebuttonx",el.style.left);
                    sessionStorage.setItem("pagebuttony",el.style.bottom);
                    // 为什么都没有呢
                    console.log(el.style)
                    console.log(el.style.left)
                    console.log(el.style.bottom)
                    // console.log(this)
                    var poview = $("#poview").position();
                    sessionStorage.setItem("pagebuttonx",poview.left);
                    sessionStorage.setItem("pagebuttony",poview.top);
                    console.log(poview);
                }
            }
    },
    mounted(){
        var disx = sessionStorage.getItem("pagebuttonx")+"px";
        var disy = sessionStorage.getItem("pagebuttony")+"px";
        if(disx&&disy){
            console.log(disx)
            console.log(disy)
            // this.$refs.dragdiv.style.left=disx;
            // this.$refs.dragdiv.style.top=disy;
            var poview = $("#poview");
            $("#poview").css({"top":disy,"left":disx})
            poview.left = disx ;
            poview.top = disy;
        }
    },
    }
</script>
<style scoped>
.detailpage{
    position: relative;
}
.main{
    overflow: hidden;
    /* position: relative; */
}
.main .left{
    float: left;
}
.main .left img{
    width:500px;
    height:500px;
}
.main .right{
    float: left;
    margin-left: 20px;
}
.drag{
    width: 100px;
    height: 100px;
    position: absolute;
    /* position: relative; */
    bottom: 0px;
    left: 0px;
    background-color: red;
}
.formdiv{
    position: relative;
    width:100%;
    height: 100%;
}
</style>
